<template>
    <el-dialog title="客户 - 签名统计" :visible="visible" width="1000px" append-to-body @close="close">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="日期" prop="dayList">
                <el-date-picker
                    size="small"
                    v-model="queryParams.dayList"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    :value-format="'yyyy-MM-dd'"
                    :clearable="false"
                    :editable="false"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="签名" prop="sign">
                <el-input
                    v-model="queryParams.sign"
                    placeholder="请输入签名"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button
                    type="warning"
                    icon="el-icon-download"
                    size="small"
                    @click="handleExport"
                    v-hasPermi="['smsgateway:reportCustomerSign:export']"
                >导出</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="reportList">
            <el-table-column label="日期" align="center" prop="day" width="180" />
            <el-table-column label="账号ID" align="center" prop="customerId" />
            <el-table-column label="签名" align="center" prop="sign" />
            <el-table-column label="成功量" align="center" prop="successCount" />
            <el-table-column label="失败量" align="center" prop="errorCount" />
            <el-table-column label="未知量" align="center" prop="unknownCount" />
            <el-table-column label="公司收入" align="center" prop="customerAmount" />
            <el-table-column label="通道成本" align="center" prop="channelCost" />
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </el-dialog>
</template>

<script>
import {
    listReportCustomerSign,
    getReportCustomerSign,
    exportReportCustomerSign
} from "@/api/sms/reportCustomerSign";
import daterange from './mixins/daterange'
import pageCustomer from './mixins/pageCustomer'

export default {
    name: "DialogReportCustomerSign",
    mixins: [pageCustomer, daterange],
    data() {
        return {
            reportParams: {
                pageNum: 1,
                pageSize: 10,
                sign: undefined
            },
            // 查询参数
            queryParams: {
                sign: undefined,
                dayList: [],
            },
        };
    },
    watch: {
        customerId: function(val) {
            if(val){
                this.queryParams.dayList = this.dayList

                this.reportParams.customerId = val;
                this.reportParams.startDay = this.queryParams.dayList[0]
                this.reportParams.endDay = this.queryParams.dayList[1]
                this.getList();
            }
        },
    },
    methods: {
        /** 查询客户-签名发送量统计列表 */
        getList() {
            this.loading = true;
            listReportCustomerSign(this.reportParams).then(response => {
                this.reportList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.reportParams.pageNum = 1;
            this.reportParams.sign = this.queryParams.sign;
            this.reportParams.startDay = this.queryParams.dayList[0]
            this.reportParams.endDay = this.queryParams.dayList[1]

            this.getList();
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.reportParams;
            this.$confirm(
                "是否确认导出所有客户-签名发送量统计数据项?",
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(function() {
                    return exportReportCustomerSign(queryParams);
                })
                .then(response => {
                    this.download(response.msg);
                })
                .catch(function() {});
        },
        
    }
};
</script>